import React, { Component } from 'react'
import PropTypes from 'prop-types'
// 设置组件的属性的数据类型以及是不是必传项
// 以前 React 模块中包含了 验证属性的数据类型的 对象
// 但是 在react15.3版本以后，将这个模块抽离出来了
// cnpm i prop-types -S
// 不管是类组件还是函数式组件，都需要在组件定义好之后设置
const Title = (props) => {
  return (
    <h1>{ props.name }</h1>
  )
}
Title.propTypes = {
  name: PropTypes.string
}
class Content extends React.Component {
  render () {
    return (
      <div>{ this.props.con } - { this.props.num }</div>
    )
  }
}
Content.propTypes = {
  con: PropTypes.string,
  // num: PropTypes.number
  // num: PropTypes.oneOfType([
  //   PropTypes.string,
  //   PropTypes.number
  // ]),
  num: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]).isRequired,
  time: PropTypes.string.isRequired // 属性必须传递
}
class App extends Component {
  render () {
    return (
      <>
        <Title name="标题"></Title>
        <Content con="内容" num={100}></Content>
      </>
    )
  }
}

export default App